<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>购物车全选功能</title>
  <!-- 引入初始化 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    body {
      background: #fff;
      color: #666;
      font-size: 14px;
    }

    input {
      outline: none;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
  <!-- 引入购物车样式 -->
  <style>
    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th {
      font: normal 14px/50px '宋体';
      color: #666;
    }

    th,
    td {
      border: none;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }

    input[type='checkbox'] {
      width: 13px;
      height: 13px;
    }

    tbody p {
      position: relative;
      bottom: 10px;
    }

    tbody .add,
    tbody .reduce {
      float: left;
      width: 22px;
      height: 22px;
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      outline: none;
      cursor: pointer;
    }

    tbody input[type='text'] {
      width: 50px;
      float: left;
      height: 18px;
      text-align: center;
    }

    tbody .count-c {
      width: 98px;
      margin: 0 auto;
    }

    button[disabled] {
      color: #ddd;
      cursor: not-allowed;
    }

    tbody tr:hover {
      background: #eee;
    }

    tbody tr.active {
      background: rgba(241, 209, 149, 0.945);
    }

    .controls {
      width: 790px;
      margin: 10px auto;
      border: 1px solid #ccc;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
    }

    .controls .del-all,
    .controls .clear {
      float: left;
      margin-right: 50px;
    }

    .controls p {
      float: right;
      margin-right: 100px;
    }

    .controls span {
      color: red;
    }

    .controls .pay {
      position: absolute;
      right: 0;
      width: 80px;
      height: 54px;
      background: red;
      font: bold 20px/54px '宋体';
      color: #fff;
      text-align: center;
      bottom: -1px;
    }

    .controls .total-price {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="car">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="all" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="carBody">
        <tr>
          <td>
            <input class="s_ck" type="checkbox" readonly />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">5￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">5￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">10￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">20￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">20￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">40￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">35￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">70￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="controls clearfix">
      <a href="javascript:" class="del-all">删除所选商品</a>
      <a href="javascript:" class="clear">清理购物车</a>
      <a href="javascript:" class="pay">去结算</a>
      <p>
        已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
      </p>
    </div>
  </div>
  <script>
// 用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号
    //获取加号元素对象
    let adds=document.querySelectorAll('.add')
    //获取数量的标签对象
    let inputs=document.querySelectorAll('.count-c input')
    //获取减号元素的对象
    let reduces=document.querySelectorAll('.reduce')
    //删除元素的对象
    let dels=document.querySelectorAll('.del')
    //获取单价元素对象
    let prices=document.querySelectorAll('.price')
    //获取小计的元素对象
    let totals=document.querySelectorAll('.total')
    //商品总件数的元素对象
    let totalCount=document.querySelector('.totalCount')
                      // 需求：模拟客户在点击添加到购车的时候将商品添加到购物车中
        //                <tr>
        //   <td>
        //     <input class="s_ck" type="checkbox" />
        //   </td>
        //   <td>
        //     <img src="./images/01.jpg" />
        //     <p>牛奶</p>
        //   </td>
        //   <td class="price">20￥</td>
        //   <td>
        //     <div class="count-c clearfix">
        //       <button class="reduce" disabled>-</button>
        //       <input type="text" value="1" />
        //       <button class="add">+</button>
        //     </div>
        //   </td>
        //   <td class="total">40￥</td>
        //   <td>
        //     <a href="javascript:" class="del">删除</a>
        //   </td>
        // </tr>
//就是将这一部分的数据动态的添加到页面中，每次添加数据以后都要动态的刷新页面，
//否则刚添加进去的元素就无法绑定事件了
    let num=0
    //给加号添加监听事件
    for(let i=0;i<adds.length;i++){
     //1.加号
      adds[i].addEventListener('click',function(){
        inputs[i].value++
        //减号启用
        reduces[i].disabled=false
         //3.小计
           totals[i].innerHTML=(inputs[i].value*parseInt(prices[i].innerHTML))+'￥'
           //console.log(totals[i].innerHTML);
           //修改商品总数量
          num=num+count(parseInt(inputs[i].value) )
          console.log(num);
      })
      //2.减号
      reduces[i].addEventListener('click',function(){
        inputs[i].value--
        if(inputs[i].value==1){
          reduces[i].disabled=true
        }
          //3.小计
        totals[i].innerHTML=(inputs[i].value*parseInt(prices[i].innerHTML))+'￥'
        //console.log(totals[i].innerHTML);
      })
     
    }
    function count(age){
      let count=0
      count=count+age
      return count

    }
  </script>
</body>

</html>